<template>
  <div class="home">
    <!--  头部搜索栏 -->
    <div class="top">
      <h1>饿了吗</h1>
      <input type="text" placeholder="输入商家，商品名称" v-model="filter" />
    </div>
    <!-- 轮播图 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="1000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in img" :key="index">
          <img :src="item.bannerUrl" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 内容区 -->
    <div class="main">
      <h1>猜你喜欢</h1>
      <ul>
        <li>综合排序</li>
        <li @click="distance">距离最近</li>
        <li @click="Sales">销量最高</li>
        <li>筛选！</li>
      </ul>
      <ol>
        <li>年货节热卖</li>
        <li>津贴联盟</li>
        <li>满减优惠</li>
        <li>品质联盟</li>
      </ol>
      <div class="bgbox">
        <div
          class="box"
          v-for="(item, index) in render"
          :key="index"
        >
          <div class="img">
            <img :src="item.picUrl" alt="" />
          </div>
          <div class="moddle">
            <h2>{{ item.name }}</h2>
            <div class="score">
              <span class="cheng">4.3</span>
              <span>{{ item.monthSalesTip }}</span>
            </div>
            <div class="song">
              <div class="zuo">
                起送￥20 远距离<span>{{ item.shippingFeeTip }}</span
                ><span class="add">￥6</span>
              </div>
              <div class="you">
                {{ item.deliveryTimeTip }} <span>{{ item.distance }}</span>
              </div>
            </div>
            <div class="introduce">
              <span v-for="(good, index) in item.discounts2" :key="index">{{
                good.info
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref ,onBeforeMount} from "vue";
import { waimai_banner, waimai_index } from "../../api/index";

let img = ref(null);
let render=ref(null)

onBeforeMount(() => {
  waimai_banner().then((res) => {
    if (res.data.code == 200) {
      img.value = res.data.list;
    }
  });
  waimai_index().then((res) => {
    if (res.data.code == 200) {
      render.value = res.data.list;
    }
  });
});
 let distance=()=> {
      render.value.sort(function (a, b) {
        return parseFloat(a.distance) - parseFloat(b.distance);
      });
    }
  let Sales =()=>{
      rendervalue.sort(function (a, b) {
        return b.monthSalesTip.slice(2) * 1 - a.monthSalesTip.slice(2) * 1;
      });
    }
</script>

<style lang="css" scoped>
/*===============头部 */
.home {
  width: 95%;
  height: 90px;
  background-color: rgb(19, 153, 231);
  margin: auto;
  border-radius: 5px;
}
.home h1 {
  height: 20px;
  color: white;
  font-size: 20px;
  margin-left: 10px;
}
.home input {
  width: 95%;
  height: 30px;
  margin-top: 20px;
  border-radius: 20px;
  text-align: center;
  border: none;
  outline: none;
  margin-left: 8px;
}
/*=================轮播图 */
.my-swipe .van-swipe-item {
    margin-top: 10px;
  color: #fff;
  font-size: 20px;
  text-align: center;
}
/*    ===============内容区 */
.main h1 {
  font-size: 18px;
}
.main ul {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  list-style: none;
  text-align: center;
}
.main ol {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  list-style: none;
  text-align: center;
  font-size: 14px;
}
.main ol li {
  width: 23%;
  height: 25px;
  border-radius: 5px;
  line-height: 25px;
  background-color: rgb(232, 226, 226);
}
.box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
.box .img {
  width: 30%;
}
.box .img img {
  width: 100%;
}
.moddle {
  width: 70%;
}
.moddle h2 {
  font-size: 16px;
  margin-bottom: 10px;
}
.moddle .score {
  font-size: 12px;
  color: rgb(127, 127, 127);
  line-height: 30px;
}
.moddle .score .cheng {
  color: rgb(253, 93, 34);
}
.moddle .song {
  font-size: 12px;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgb(127, 127, 127);
}
.moddle .song .zuo span.add {
  font-size: 12px;
  text-decoration: line-through;
  color: #ccc;
}
.moddle .introduce span {
  display: inline-block;
  margin-bottom: 5px;
  font-size: 12px;
  padding: 2px;
  margin-right: 5px;
  background-color: rgb(251, 229, 191);
  color: rgb(251, 106, 49);
}
.bgbox {
  height: 360px;
  overflow: auto;
}
</style>